import animateCss from 'animate.css';

let TransitionGroup = React.addons.TransitionGroup ;

let animateContainer;
class Animate extends React.Component{
	constructor(){
		super();
	}

	componentWillEnter(cb){
		console.log('=====>componentwillEnter');
		React.findDOMNode(this).className='animated fadeIn';
		cb()
	}

	componentDidEnter(){
		console.log('=====>componentDidEnter');
	}

	componentWillLeave(cb){
		// if(this.props.children){
			console.log('=====>componentWillLeave');
			React.findDOMNode(this).className='animated bounceInRight'
			cb();
		// }
	}

	componentDidLeave(){
		console.log('=====>componentDidLeave')
	}

	render(){
		return (
			<div>
				{this.props.children}
			</div>
		)
	}
}

export default class Animation extends React.Component{
	constructor(){
		super();
		this.state = {show:false};

	}
	static defaultProps = {
		name:'fadeIn'
	}
	componentDidMount(){
		let that = this;
		setTimeout(()=>{
			that.setState({
				show: true
			})
		},1)

	}

	render(){
		let animateContainer = this.state.show?(<Animate key={"animate-container-"+this.state.show}>{this.props.children}</Animate>):(<Animate key={"animate-container-"+this.state.show}></Animate>);

		return (
			<TransitionGroup transitionName="fade">
					{animateContainer}
			</TransitionGroup>
			
		)
	}
}
